<template>
	<view class="main">
		<view class="nav_content" :class="{'nav_fixed' : navFixed}">
			<view class="nav_box">
				<view class="nav">
					<view class="nav_item">
						<view class="nav_item_content" v-for="v in nav" :key="v.id" @tap="dropMenu(v)">
							<view class="item_box" v-if="v.title == active">
								<view style="color: #4581F6;">{{v.title}}</view>
								<view><u-icon color="#4581F6" size="13" name="arrow-up-fill"></u-icon></view>
							</view>
							<view class="item_box" v-if="v.title !== active">
								<view>{{v.title}}</view>
								<view><u-icon color="#C4C4C4" size="13" name="arrow-down-fill"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="drop_box" v-show="show">

				<view class="drop" v-for="(v,k) in selectGroup" :key="k" v-show="active == '筛选'">
					<view class="drop_title">
						{{v.text}}
					</view>
					<view class="drop_list">
						<view class="drop_item" v-for="(value,key) in v.list" :key="key">
							<u-button v-if="value.isChecked == true" type="primary" shape="circle" size="small"
								@click="dropSelect(value)">{{value.text}}</u-button>
							<u-button v-if="value.isChecked == false" type="default" shape="circle" size="small"
								@click="dropSelect(value)">{{value.text}}</u-button>
						</view>
					</view>
				</view>

				<view class="drop_list" v-if="active == '智能排序'">
					<view class="drop_item" v-for="(value,key) in aiSortGroup" :key="key">
						<u-button v-if="value.isChecked == true" type="primary" shape="circle" size="small"
							@click="dropSelect(value)">{{value.text}}</u-button>
						<u-button v-if="value.isChecked == false" type="default" shape="circle" size="small"
							@click="dropSelect(value)">{{value.text}}</u-button>
					</view>
				</view>

				<view class="bottom">
					<view class="reset">
						<u-button type="default" throttleTime="1000" size="small" shape="circle"
							@click="dropRest">重置</u-button>
					</view>
					<view class="confirm">
						<u-button type="primary" throttleTime="1000" size="small" shape="circle"
							@click="dropConfirm">确定</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" @click="dropConfirm"></u-overlay>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from "vuex";
	import {
		searchNav
	} from '@/api/home/search.js'
	export default {
		inject: ['scroll'],
		name: "my-nav",
		data() {
			return {
				nav: [{
					title: '郑州',
					id: 1,
					checked: false,
				}, {
					title: '智能排序',
					id: 2,
					checked: false,
				}, {
					title: '筛选',
					id: 3,
					checked: false,
				}], //下拉菜单
				show: false, //菜单状态
				scrollTop: 0,
				status: false,
				navFixed: false,
				active: '',
			};
		},
		methods: {
			async dropAction(nav) {
				//console.log(nav,this.active);
				this.$store.state.doc.popupShow = true //冻结背景滑动
				this.$store.state.doc.navActiveTitle = nav.title
				//this.$store.state.doc.frozenBackGround = true
				if (nav.id == 1) {
					this.show = false
					this.active = ''
					this.navFixed = false
					let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
					let curPage = pages[pages.length - 1]; // 当前页面是这个页面栈数组中的最后一个
					if (curPage.$page.fullPath == '/pages/sousuo/search_city/index') {
						// this.$store.state.doc.zone = {
						// 	id: '',
						// 	name: ''
						// }  //清空区
						// this.$store.state.doc.navCity = {
						// 	id: '',
						// 	name: '全部'
						// }
						uni.navigateBack({
							delta: 1
						})
						return
					}
					uni.navigateTo({
						url: `/pages/sousuo/search_city/index`
					});
					return
				}
				//console.log(this.$store.state.doc.navActiveTitle,'title');
				if (this.$store.state.doc.navActiveTitle == this.active) {
					this.show = false
					this.active = ''
					this.navFixed = false
					return
				}
				this.navFixed = true
				this.active = nav.title //点中下拉菜单
				//console.log(this.$store.state.doc.topSearchButton);
				this.show = true //下拉菜单
				// console.log(curRoute);
			},
			dropMenu(nav) {
				let top = this.scroll.scrollLength
				uni.pageScrollTo({
					scrollTop: 0,
				});
				setTimeout(() => {
					//console.log(this.scroll.scrollLength,'nav');
					this.dropAction(nav)
				}, 200)
			},
			async dropSelect(button) {
				if (this.active == '筛选') {
					this.$store.state.doc.selectGroup.map(v => {
						return v.list.map(value => {
							if (button.id == value.id) {
								value.isChecked = !value.isChecked
							}
							return value
						})
					})
					//console.log(this.selectGroup,'智能排序');
				}
				if (this.active == '智能排序') {
					if (button.text == '距离优先') {
						let dingwei = uni.getStorageSync('latitude')
						if (dingwei == '') {
							let rr = await this.getLocation()
						}
					}
					this.$store.state.doc.aiSortGroup.map(v => {
						v.isChecked = false
						if (button.id == v.id) {
							v.isChecked = !v.isChecked
						}
						return v
					})
					//console.log(button,'筛选');
				}
				//console.log(this.$store.state.doc.selectGroup,this.$store.state.doc.aiSortGroup);
				//this.hsopSelected = button.text
			},
			dropRest() { //下拉菜单重置
				this.$store.state.doc.selectGroup.map((v) => {
					return v.list.map((value) => {
						value.isChecked = false
						return value
					})
				})

				this.$store.state.doc.aiSortGroup.map((v, k) => {
					if (k == 0) {
						//console.log(v,k);
						v.isChecked = true
					} else {
						v.isChecked = false
					}
					return v
				})
				this.$store.state.doc.navCity = {
					id: '',
					name: '全部'
				}
				this.$store.state.doc.zone = {
					id: '',
					name: ''
				} //清空区
				this.$store.state.doc.selectGroupResult = [] //把记录的按钮id清空下
			},
			...mapMutations(['ADDHIS', 'NODATA']),
			async dropConfirm() { //下拉菜单确认
				this.$store.state.doc.popupShow = false //解除冻结背景滑动
				//智能排序,把需要赋值的存起来，这里存有个好处就是不用去重
				let selectGroup = uni.$u.deepClone(this.$store.state.doc.selectGroup);
				this.$store.state.doc.selectGroupResult = selectGroup.map((v) => {
					v.list = v.list.map(value => {
						if (value.isChecked) {
							return value.id
						}
					})
					return {
						'text': v.text,
						'list': v.list.filter(v => v !== undefined).join()
					}
				})
				//console.log(this.$store.state.doc.selectGroupResult,'智能排序');
				//筛选
				let aiSortGroup = uni.$u.deepClone(this.$store.state.doc.aiSortGroup);
				this.$store.state.doc.aiSortGroupResult = aiSortGroup.filter(v => {
					if (v.isChecked) {
						return v.id
					}
				})
				//console.log(this.$store.state.doc.aiSortGroupResult,this.$store.state.doc.selectGroupResult);
				this.show = false
				this.active = ''

				if (this.hasHaoFlag == 1) { //按钮为打开状态，只显示有号
					this.ADDHIS()
					//return
				}
				if (this.hasHaoFlag == 2) { //按钮为关闭状态，有号无号都显示
					this.NODATA()
					//return
				}
				if (this.$store.state.doc.ResultTopHight < 114) {
					this.navFixed = false
				}
			},
			async navData(type) {
				let res = await searchNav(type)
				//console.log(res, 12121888);
				//console.log(res.data,12121888);
			},
			getLocation() {
				return new Promise((resolve, reject) => {
					wx.getLocation({
						type: 1, // 获取经纬度和省市区县数据
						success: (res) => {
							//console.log(res,'12111');
							this.$store.state.doc.geoList = res
							//console.log(iscity)
							let latitude = res.latitude
							let longitude = res.longitude
							uni.setStorageSync("latitude", latitude)
							uni.setStorageSync("longitude", longitude)
							//uni.setStorageSync("city", res.city)
							resolve(true)
						},
						fail: (res) => {
							//console.log(res, 'res');
							uni.$u.toast('该功能需要获取定位后才能使用')
							reject(false)
							uni.removeStorageSync("latitude")
							uni.removeStorageSync("longitude")
						},
						complete: () => {},
					});
				})
			}
		},
		computed: {
			...mapState({
				hasHaoFlag: state => state.doc.hasHaoFlag,
			}),
			aiSortGroup() {
				//console.log(this.active,'111');
				return this.$store.state.doc.aiSortGroup

			},
			selectGroup() {
				//console.log(this.active,'sdf');
				return this.$store.state.doc.selectGroup
			},
		},
		onShow() {
			this.show = false
			this.active = ''
			this.navFixed = false
			this.$store.state.doc.navActiveTitle = ''
			this.$store.state.doc.popupShow = false //解除冻结背景滑动
		},
		created() {
			//this.navData('hosp')
			this.nav.forEach((v) => {
				if (v.id == 1) {
					v.title = this.$store.state.doc.navCity.name //选择城市里的城市
				}
			})
			this.active = this.$store.state.doc.navActiveTitle //路由跳转后，高亮消失，用vuex初始化一下
			//console.log(this.$store.state.doc.navCity);
		},
		mounted() {
			this.show = false
			this.active = ''
			this.navFixed = false
			this.$store.state.doc.navActiveTitle = ''
		},
		watch: {
			'$store.state.doc.ResultTopHight': {
				handler(ne, ol) {
					//console.log(ne,'navnav');
					if (ne > 114) {
						this.navFixed = true
					} else {
						this.navFixed = false
					}
				},
				immediate: true
			},
			'$store.state.doc.navCity.name'(ne, old) {
				//console.log(ne,old,123);
				this.nav.forEach((v) => {
					if (v.id == 1) {
						v.title = this.$store.state.doc.navCity.name //选择城市里的城市
					}
				})
			},
			show(ne) {
				this.$store.state.doc.frozen = ne
			}
		},

	}
</script>

<style lang="scss" scoped>
	.main {

		// overflow: hidden;
		// position: fixed;
		//z-index: 10071;
		.nav_fixed {
			position: fixed !important;
			//background-color: #fff;
			z-index: 10071;
			width: 100%;
			top: 120rpx;
		}

		.nav_content {
			position: relative;


			.nav_box {
				margin: 30rpx 0 0 0;

				.nav {
					margin: 0 auto;

					background: #FFFFFF;
					//border-radius: 20rpx;
					//width: 690rpx;
					height: 76rpx;

					.nav_item {
						padding: 20rpx 0 22rpx 0;
						font-size: 24rpx;
						font-weight: 400;
						color: #3D3D3D;
						line-height: 34rpx;
						display: flex;
						justify-content: space-around;

						.nav_item_content {
							padding: 0 60rpx;

							.item_box {
								display: flex;
								flex-direction: row;
								align-items: center;
							}
						}
					}
				}
			}

			.drop_box {
				background-color: #fff;

				.drop_list {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: start;
					align-items: center;
					margin-left: 30rpx;

					//padding-bottom: 50rpx;
					.drop_item {
						padding-right: 20rpx;
						padding-bottom: 30rpx;
						flex: 0 0 20%;
					}
				}

				.drop {
					.drop_title {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						padding: 30rpx 0 24rpx 30rpx;
					}

					.drop_list {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: start;
						align-items: center;
						margin-left: 30rpx;

						//padding-bottom: 50rpx;
						.drop_item {
							padding-right: 20rpx;
							padding-bottom: 30rpx;
							flex: 0 0 20%;
						}
					}
				}

				.bottom {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: center;
					padding: 16rpx 30rpx 42rpx 30rpx;

					.reset {
						flex: 0 0 40%;
					}

					.confirm {
						flex: 0 0 40%;
					}
				}
			}
		}
	}
</style>